<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>

<div id="formDetails" class="container well">
    <form id="userDetailsForm" class="form-horizontal">

        <fieldset>

            <!-- Form Name -->
            <legend>User Details</legend>

            <!-- Text input-->
            <div class="control-group">
                <label class="control-label" for="nameInput">Name</label>
                <div class="controls">
                    <input id="nameInput" name="nameInput" type="text" placeholder="please enter name here" class="input-xlarge">

                </div>
            </div>

            <!-- Text input-->
            <div class="control-group">
                <label class="control-label" for="addressInput">Address</label>
                <div class="controls">
                    <input id="addressInput"
                           name="addressInput" type="text" placeholder="please enter address here" class="input-xlarge">

                </div>
            </div>

            <!-- Text input-->
            <div class="control-group">
                <label class="control-label" for="emailInput">Email</label>
                <div class="controls">
                    <input id="emailInput" name="emailInput" type="text" placeholder="please enter your email here" class="input-xlarge">

                </div>
            </div>

            <!-- Text input-->
            <div class="control-group">
                <label class="control-label" for="phoneInput">phone</label>
                <div class="controls">
                    <input id="phoneInput" name="phoneInput" type="text" placeholder="please enter phone here" class="input-xlarge">

                </div>
            </div>

            <!-- Button -->
            <div class="control-group">
                <label class="control-label" for="btnSubmit"></label>
                <div class="controls">
                    <button id="btnSubmit" name="btnSubmit" class="btn btn-primary">Submit</button>
                </div>
            </div>

        </fieldset>
    </form>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.js"></script>

    <script type="text/javascript">

        $(function (){

            var postObj = {
               url: 'http://localhost:9300/createUserDetails',
               type: 'POST',
               dataType: 'json',
               timeout : '10000',
                success: function(data){
                    console.log(data);
                },
                error: function(error){
                    alert('error occured while post of create user details');
                },
                complete: function(){

                }

            }

            $('#btnSubmit').click(function (){

                var postingData  = {
                    name: $('#nameInput').val(),
                    address: $('#addressInput').val(),
                    email: $('#emailInput').val(),
                    phone: $('#phoneInput').val()
                }

                postObj.data = postingData;

                $.ajax(postObj);

                return false;
            });



        });


    </script>



</div>



</body>
</html>